<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input style="width: 25%;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>
      <el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button>
    </div>

    <div class="tab-container" style="margin-top: 30px">
      <!--
      <el-tag>mounted times ：{{ createdTimes }}</el-tag>
      <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
  -->
      <el-tabs v-model="activeName" style="margin-top:15px;border-radius: 15px" type="border-card">
        <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
          <keep-alive>
            <tab-pane v-if="activeName===item.key" :type="item.key" @create="showCreatedTimes" />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>

      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-pagination :page-size="5" :pager-count="6" layout="prev, pager, next" :total="10" />
      </el-row>
    </div>
  </div>
</template>

<script>
import TabPane from './components/TabPane.vue'

export default {
  name: 'Tab',
  components: { TabPane },
  data() {
    return {
      tabMapOptions: [
        { label: 'Admin', key: 'admin' },
        { label: 'User', key: 'user' }
      ],
      activeName: 'admin',
      createdTimes: 0
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`)
    }
  },
  created() {
    // init the default selected tab
    const tab = this.$route.query.tab
    if (tab) {
      this.activeName = tab
    }
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    }
  },
  handleFilter() {
    this.listQuery.page = 1
    this.getList()
  }
}
</script>

<style scoped>
.app-container{
  margin-top: 30px;
  margin-left: 2rem;
  margin-right: 2rem;
  border-radius: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .filter-container {
    margin-right: 30px;
    margin-left: 30px;
    margin-top: 30px;
  }

  .tab-container {
    //margin: 30px 2rem 30px 30px;
    margin-bottom: 30px;
    margin-right: 30px;
    margin-left: 30px;
  }
}

</style>
